<!-- 添加用户 -->
<template>
  <div class="useradd">
    <div class="login-form">
      <h2>添加用户</h2>
      <el-form
        id="of"
        status-icon
        label-width="80px"
        ref="ruleForm"
        :model="useradd"
        :rules="rules"
      >
        <el-form-item prop="id" label="学号">
          <el-input placeholder="学号" v-model.number="useradd.id"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="姓名">
          <el-input placeholder="姓名" v-model="useradd.username"></el-input>
        </el-form-item>
        <el-form-item prop="age" label="年龄">
          <el-input placeholder="年龄" v-model.number="useradd.age"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-radio v-model="useradd.sex" label="男">男</el-radio>
          <el-radio v-model="useradd.sex" label="女">女</el-radio>
        </el-form-item>
        <!-- <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="Setting.apiBaseUrl+'/admin/uploadimg'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="Setting.baseUrl+imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
        <!-- </el-form-item> -->
        <el-form-item prop="is_vip" label="等级">
          <el-radio v-model="useradd.is_vip" label="0">普通用户</el-radio>
          <el-radio v-model="useradd.is_vip" label="1">会员</el-radio>
        </el-form-item>
        <el-form-item label="身份">
          <el-radio v-model="useradd.level" label="0">管理员</el-radio>
          <el-radio v-model="useradd.level" label="1">学生</el-radio>
          <el-radio v-model="useradd.level" label="2">班主任</el-radio>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary" @click="goAdd">确认添加</el-button> -->
          <el-button type="primary" @click="goAdd('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import axios from "axios";
import Setting from "@/utils/setting.js"
import { userAddApi } from "../../../api/users.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    var checkId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("Id不能为空"));
      } else {
        callback();
      }
    };
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      } else {
        callback();
      }
    };
    //这里存放数据
    return {
      Setting:Setting,
      useradd: {
        id: "",
        username: "",
        sex: "",
        age: "",
        level: "",
        is_vip: "",
      },
      rules: {
        age: [{ validator: checkAge, trigger: "blur" }],
        id: [{ validator: checkId, trigger: "blur" }],
        username: [{ validator: checkUsername, trigger: "blur" }],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userAddApi(this.useradd).then(() => {
              // alert("创建成功");
              this.$message({
                showClose: true,
                message: '创建成功',
                type: "success",
              });
              this.$router.push("/admin/users/list");
          });
        }
      });
    },
    handleAvatarSuccess(res) {
      console.log(res);
      // this.imageUrl = res.data.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.useradd {
  width: 500px;
  h2 {
    color: rgb(77, 77, 77);
    margin-bottom: 10px;
  }

}
</style>
